<!DOCTYPE html>
<html>
<head>
  <title>网址书签</title>
  </head>
  <body>

  <h1>网址书签</h1>

  <!-- 登录表单 -->
  <form id="login-form">
    <label for="password">管理员密码：</label>
      <input type="password" id="password" name="password">
        <button type="submit">登录</button>
        </form>

        <!-- 添加书签表单 -->
        <form id="bookmark-form" style="display: none;">
          <label for="url">URL：</label>
            <input type="text" id= "url" name= "url">
              
                 <!-- 添加其他需要的字段（例如标题、描述等）-->
                   
                     <button type= "submit">添加书签</button>
                     </form>

                     <!-- 显示已有书签列表 -->
                     <ul id= "bookmark-list"></ul>


                     <script>

                     // 假设这里存储了一些初始的书签数据
                     var bookmarks = [
                             { url: 'https://www.example.com', title: 'Example' },
                                 { url: 'https://www.google.com', title: 'Google' }
                     ];

                     var passwordInput = document.getElementById('password');
                     var loginForm = document.getElementById('login-form');
                     var bookmarkForm = document.getElementById('bookmark-form');
                     var bookmarkList = document.getElementById('bookmark-list');

                     loginForm.addEventListener('submit', function(event) {
                             event.preventDefault();
                                 
                                     var password = passwordInput.value;
                                         
                                             // 在这里进行管理员密码验证逻辑
                                                 if (password === 'your-password') {
                                                             loginForm.style.display = 'none';
                                                                     bookmarkForm.style.display = 'block';
                                                                             renderBookmarks();
                                                 } else {
                                                             alert('密码错误！');
                                                 }
                     });

                     bookmarkForm.addEventListener('submit', function(event) {
                             event.preventDefault();
                                 
                                     var urlInput = document.getElementById('url');
                                         
                                             // 在这里获取其他字段的输入值
                                                 
                                                     var newBookmark = { url: urlInput.value };
                                                       
                                                         	// 将新书签添加到书签列表
                                                               	bookmarks.push(newBookmark);
                                                                     	
                                                                           	// 清空表单输入框
                                                                                 	urlInput.value = '';
                                                                                       
                                                                                         	renderBookmarks(); // 更新显示书签列表
                     });

                     function renderBookmarks() {
                           bookmarkList.innerHTML = ''; // 清空已有的书签列表
                             
                               bookmarks.forEach(function(bookmark) {
                                         var liElement = document.createElement('li');
                                               var aElement = document.createElement('a');
                                                     
                                                           aElement.href=bookmark.url;
                                                                 aElement.textContent=bookmark.title || bookmark.url;
                                                                       
                                                                             liElement.appendChild(aElement);
                                                                                   
                                                                                     	  bookmarkList.appendChild(liElement);
                               });
                     }

                     </script>

                     </body>
                     </html>
                     
                               })
                     }
                     })
                                                 }
                                                 }
                     })
                     ]